@tailwind base;
@tailwind components;
@tailwind utilities;

.gradio_page {
    @apply container mx-auto my-4;
    .title {
        @apply text-center p-4 text-4xl;
    }
    .description {
        @apply pb-4;
    }
    .article {
        @apply pt-8 pb-4 max-w-none;        
    }
}

.gradio_interface[theme="huggingface"] {
    .loading {
        @apply absolute right-1;
    }
    .loading img {
        @apply h-5;
    }
    .panels {
        @apply flex flex-wrap justify-center gap-4;
    }
    .panel {
        @apply flex-1;
    }
    .component_set {
        @apply border border-gray-100 p-4 rounded-lg flex flex-col gap-3 bg-gradient-to-br from-gray-50 to-white;
    }
    .panel_header {
        @apply flex items-center text-sm text-gray-700 mb-1.5;
    }
    .panel_button {
        @apply shadow-sm font-semibold border flex-grow p-3 rounded-lg transition bg-gradient-to-b from-gray-50 hover:from-gray-100 to-gray-100 focus:ring-offset-indigo-300;
    }
    .panel_buttons {
        @apply flex gap-4 my-4;
    }
    .screenshot_set {
        @apply hidden flex hidden flex-grow;
    }
    .panel_button.left_panel_button {
        @apply rounded-tr-none rounded-br-none;
    }
    .panel_button.right_panel_button {
        @apply rounded-tl-none rounded-bl-none bg-gray-100 hover:bg-gray-300;
    }
    .examples {
        h4 {
            @apply text-lg font-semibold my-2;
        }
        .examples_control {
            @apply hidden flex hidden gap-2;
        }
        .examples_control_left {
            @apply flex gap-2;
        }
        .shortcut {
            @apply block text-xs;
        }
        .examples_control button {
            @apply bg-gray-100 hover:bg-gray-200 p-2;
        }
        .examples_table {
            @apply table-auto p-2 bg-gray-50 mt-4 rounded;
            tbody tr {
                @apply cursor-pointer;
            }
            thead {
                @apply border-b-2 border-gray-300;
            }
            tbody tr:hover {
                @apply bg-indigo-500 text-white;
            }
            tbody tr.selected {
                @apply font-bold;
            }
            td,
            th {
                @apply py-2 px-4;
            }
        }
    }
    /* Input Components */
    textarea.input_text {
        @apply w-full p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400;
    }
    input.input_text {
        @apply w-full p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400;
    }
    .input_number {
        @apply w-full p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner placeholder-gray-400;
    }
    .input_image {
        @apply w-full h-80;
        .upload_zone {
            @apply border-8 border-gray-300 border-dashed w-full h-full flex justify-center items-center text-3xl text-gray-400 text-center cursor-pointer leading-10;
        }
        .image_preview_holder {
            @apply w-full h-full flex justify-center items-center bg-gray-300 relative inline-block;
        }
        .sketch > div {
            @apply bg-white;
        }
        .image_preview,
        video {
            @apply w-full h-full object-contain;
        }
        .snapshot {
            @apply absolute bottom-0 w-full bg-white bg-opacity-90 py-3 font-bold text-lg text-center;
        }
    }
    .input_image_example {
        @apply h-24;
    }
    .input_radio {
        @apply flex flex-wrap gap-2;
        .radio_item {
            @apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded cursor-pointer flex items-center gap-1;
        }
        .radio_item.selected {
            @apply text-indigo-500;
        }
        .radio_circle {
            @apply w-4 h-4 bg-white rounded-full box-border;
        }
        .selected .radio_circle {
            @apply border-4 border-indigo-600;
        }
    }
    .input_checkbox_group {
        @apply flex flex-wrap gap-2;
        .checkbox_item {
            @apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded cursor-pointer flex items-center gap-1;
        }
        .checkbox_item.selected {
            @apply text-indigo-500;
        }
        .checkbox {
            @apply w-4 h-4 bg-white rounded p-1;
            .check {
                @apply hidden;
            }
        }
        .selected .checkbox {
            @apply bg-indigo-600;
            .check {
                @apply block;
            }
        }
        .check line {
            stroke: white;
            stroke-width: 4;
            stroke-linecap: round;
        }
    }
    .input_checkbox {
        @apply flex flex-wrap gap-2;
        .checkbox_item {
            @apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded cursor-pointer flex items-center gap-1;
        }
        .checkbox_item.selected {
            @apply text-indigo-500;
        }
        .checkbox {
            @apply w-4 h-4 bg-white rounded p-1;
            .check {
                @apply hidden;
            }
        }
        .selected .checkbox {
            @apply bg-indigo-600;
            .check {
                @apply block;
            }
        }
        .check line {
            stroke: white;
            stroke-width: 4;
            stroke-linecap: round;
        }
    }
    .input_dropdown {
        @apply inline-block relative;
        .selector {
            @apply border bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded inline-flex items-center;
        }
        .current {
            @apply mr-1;
        }
        .caret {
            @apply fill-current h-4 w-4;
        }
        .dropdown_menu {
            @apply absolute hidden text-gray-700 pt-1 max-h-80 overflow-y-auto z-10;
        }
        .dropdown_item:first-child {
            @apply rounded-t;
        }
        .dropdown_item {
            @apply bg-gray-50 hover:bg-gray-400 hover:text-gray-50 py-2 px-4 block whitespace-nowrap cursor-pointer;
        }
        .dropdown_item:last-child {
            @apply rounded-b;
        }
        :hover .dropdown_menu {
            @apply block;
        }
    }
    .input_slider {
        @apply text-center;
        .range {
            @apply w-full appearance-none bg-gray-100 hover:bg-gray-100 transition rounded-full h-4 border;
        }
        .range::-webkit-slider-thumb {
            -webkit-appearance: none;
            @apply appearance-none w-5 h-5 bg-indigo-500 rounded-full cursor-pointer shadow;
        }
        .range::-moz-range-thumb {
            @apply appearance-none w-5 h-5 bg-indigo-500 rounded-full cursor-pointer shadow;
        }
        .value {
            @apply inline-block mx-auto mt-1 px-2 py-0.5 bg-gray-100 text-gray-700 rounded shadow-inner;
        }
    }
    .input_audio {
        .audio-react-recorder {
            @apply hidden;
        }
        .start {
            @apply bg-gradient-to-t from-gray-100 to-gray-50 text-gray-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded;
        }
        .stop {
            @apply bg-gradient-to-t from-red-200 to-red-50 text-red-600 py-1.5 px-3 hover:to-gray-100 font-semibold rounded;
        }
        audio {
            @apply w-full;
        }
    }
    .input_video {
        @apply w-full h-80;
        .upload_zone {
            @apply border-8 border-gray-300 border-dashed w-full h-full flex justify-center items-center text-3xl text-gray-400 text-center cursor-pointer leading-10;
        }
        .video_preview_holder {
            @apply w-full h-full flex justify-center items-center bg-gray-200;
        }
        .video_preview {
            @apply w-full h-full object-contain;
        }
    }
    .input_file {
        @apply w-full h-80;
        .upload_zone {
            @apply border-8 border-gray-300 border-dashed w-full h-full flex justify-center items-center text-3xl text-gray-400 text-center cursor-pointer leading-10;
        }
        .file_preview_holder {
            @apply w-full h-full flex flex-col justify-center items-center relative inline-block;
        }
        .file_name {
            @apply text-6xl p-6;
        }
        .file_size {
            @apply text-2xl p-2;
        }
    }

    /* Output Components */
    .output_text {
        word-break: break-word;
        @apply w-full p-3 border rounded-lg shadow-inner outline-none focus:ring-1 focus:ring-inset focus:ring-indigo-200 focus:shadow-inner whitespace-pre-wrap;
    }
    .output_label {
        .output_class {
            @apply hidden;
        }
        .confidence_intervals {
            @apply flex text-xl;
        }
        .labels {
            @apply mr-1;
        }
        .confidences {
            @apply flex flex-grow flex-col items-baseline;
        }
        .label {
            @apply overflow-hidden whitespace-nowrap h-7 mb-1 overflow-ellipsis text-right;
        }
        .confidence {
            @apply bg-gradient-to-r from-indigo-200 to-indigo-500 rounded text-white flex justify-end overflow-hidden whitespace-nowrap h-7 mb-1 px-1;
            color: transparent;
        }
    }
    .output_image {
        @apply w-full h-80;
        .image_preview_holder {
            @apply w-full h-full flex justify-center items-center bg-gray-200 relative inline-block;
        }
        .image_preview,
        video {
            @apply w-full h-full object-contain;
        }
    }
    .output_audio {
        audio {
            @apply w-full border-2 border-gray-300 rounded;
        }
    }
    .output_highlightedtext {
        .category_legend {
            @apply flex flex-wrap gap-4 mb-2;
            .category-label {
                @apply flex gap-2;
            }
            .colorbox {
                @apply w-6;
            }
        }
    }
    .output_keyvalues {
        table {
            @apply bg-white;
            thead {
                @apply font-bold;
            }
            td,
            th {
                @apply p-2;
            }
        }
    }
    .output_video {
        @apply w-full h-80 object-contain flex justify-center;
        video {
            @apply h-full;
        }
    }
    .output_file {
        @apply w-full h-80;
        .file_display {
            @apply w-full h-full flex flex-col justify-center items-center relative inline-block;
        }
        .file_name {
            @apply text-6xl p-6;
        }
        .file_size {
            @apply text-2xl p-2;
        }
    }
}
